.screen-title {
  --titleWidth: 280px;
  --titleHeight: 80px;
  --borderColor: rgba(0, 180, 220);
  height: var(--titleHeight);
  position: relative;
  z-index: 1;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, transparent, var(--borderColor) 50%, transparent);
    background-size: 100% 2px;
    background-position: 0 calc(var(--titleHeight) / 2);
    background-repeat: no-repeat;
  }
  > .title {
    margin: 0;
    width: var(--titleWidth);
    position: absolute;
    bottom: calc(var(--titleHeight) / 4);
    left: calc(50% - var(--titleWidth) / 2);
    padding: 10px 0;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    // text-shadow:0 0 10px var(--borderColor),0 0 20px var(--borderColor);
    text-shadow: 0 0 10px var(--borderColor);
    &::before,
    &::after {
      content: "";
      position: absolute;
      height: 0;
      border-left: calc(var(--titleHeight) / 8) solid transparent;
      border-right: calc(var(--titleHeight) / 8) solid transparent;
      z-index: -1;
    }
    &::before {
      width: 100%;
      left: 0;
      bottom: 0;
      border-top: calc(var(--titleHeight) / 4 - 1px) solid var(--borderColor);
    }
    &::after {
      width: calc(100% - 2px);
      left: 1px;
      bottom: 1px;
      border-top: calc(var(--titleHeight) / 4 - 1px) solid var(--pageBgColor);
    }
  }
}

.corner {
  --cornerSize: 8px;
  border: 2px solid var(--appColor);
}
.corner:before,
.corner:after {
  content: "";
  display: block;
  position: absolute;
  // border-radius:2px;
  background-color: transparent;
  z-index: -1;
}
.corner:before {
  top: -2px;
  bottom: -2px;
  left: var(--cornerSize);
  right: var(--cornerSize);
  border-top: 2px solid var(--panelBgColor);
  border-bottom: 2px solid var(--panelBgColor);
}
.corner:after {
  left: -2px;
  right: -2px;
  top: var(--cornerSize);
  bottom: var(--cornerSize);
  border-left: 2px solid var(--panelBgColor);
  border-right: 2px solid var(--panelBgColor);
}

.corner-half {
  --cornerSize: 8px;
}
.corner-half:before,
.corner-half:after {
  content: "";
  display: block;
  position: absolute;
  width: var(--cornerSize);
  height: var(--cornerSize);
  // border-radius:2px;
  background-color: transparent;
  z-index: -1;
}
.corner-half:before {
  bottom: -1px;
  left: -1px;
  box-shadow: 2px -2px 0 0 var(--appColor) inset, 4px -4px 0 0 var(--panelBgColor) inset; // -6px 6px 0 0 var(--appColor) inset;
}
.corner-half:after {
  top: -1px;
  right: -1px;
  box-shadow: -2px 2px 0 0 var(--appColor) inset, -4px 4px 0 0 var(--panelBgColor) inset; // -6px 6px 0 0 var(--appColor) inset;
}

.page-bg-dot {
  background-image: linear-gradient(var(--pageBgColor) 14px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.2) 1px, transparent 0);
  background-size: 15px 15px, 15px 15px;
}
.page-bg-strip {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25) 1px, transparent 0), linear-gradient(90deg, rgba(0, 0, 0, 0.25) 1px, transparent 0);
  background-size: 30px 30px;
}
.page-bg-cubestrip {
  background-image: linear-gradient(#fff 1px, transparent 0), linear-gradient(90deg, #fff 1px, transparent 0), linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}
.page-bg-cube {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0),
    linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

.bg-grid {
  background-color: #f6f7f9;
  background-image: linear-gradient(#fff 15px, transparent 0), linear-gradient(90deg, #fff 15px, transparent 0);
  background-size: 25% 165px;
  // background-position: -8px -8px,-8px -8px;
}
